<template>
  <div>
    <Header></Header>
    <div class="service-container">
      <div class="title">
        <h3>问题反馈</h3>
        <p>PROBLEM FEEDBACK</p>
      </div>
      <div class="service-form">
        <div class="sform-item">
          <label for="username">您的姓名：</label>
          <input type="text" id="username" v-model="username" placeholder="请输入您的姓名" maxlength="5">
        </div>
        <div class="sform-item">
          <label for="contact">联系方式：</label>
          <input type="text" id="contact" v-model="contact" placeholder="请留下您的联系方式" maxlength="13">
        </div>
        <div class="sform-item">
          <label for="address">通讯地址：</label>
          <input type="text" id="address" v-model="address" placeholder="请输入您的地址" maxlength="35">
        </div>
        <div class="sform-item">
          <label for="yixiang">产品意向：</label>
          <input type="text" id="yixiang" v-model="yixiang" placeholder="请填写您对我司有意向的产品" maxlength="50">
        </div>
        <div class="sform-item">
          <label for="problem">问题反馈：</label>
          <textarea id="problem" v-model="problem" placeholder="请写下您对我司产品使用中的问题和意见"></textarea>
        </div>
        <div class="sform-item sform-code">
          <label for="checkcode">验证码：</label>
          <input type="text" id="checkcode" v-model="checkcode" placeholder="请输入验证码" maxlength="4">
          <img @load="verifyLoadState=true"  @click="toggleVerify" :src="verifiy" alt="">
        </div>
        <div class="sform-item sform-button">
          <button type="button" class="service-btn" @click="handleSubmitProblem">提交</button>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
  head () {
    return {
      title: '服务反馈-河南酷音智能科技有限公司'
    }
  },
  data () {
    return {
      username: '',
      contact: '',
      address: '',
      yixiang: '',
      problem: '',
      checkcode: '',
      verifyLoadState: true,
      verifiy: '/api/checkCode'
    }
  },
  methods: {
    handleSubmitProblem() {
      this.$axios.post('/api/feedback', {
        name: this.username,
        contact: this.contact,
        address: this.address,
        yixiang: this.yixiang,
        problem: this.problem,
        checkcode: this.checkcode
      }).then(res => {
        if (res.data.code == 200) {
          this.$Message.success(res.data.message)
          this.verifiy = '/api/checkCode?refreshCheckCode1'

          this.username = ''
          this.contact = ''
          this.address = ''
          this.yixiang = ''
          this.problem = ''
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    toggleVerify(e) {
      if(!this.verifyLoadState) return;
      // 防止下一次重复点击
      this.verifyLoadState =  false
      const base = '/api/checkCode'
      this.verifiy = base + '?' + e.timeStamp
    }
  },
  components: {
    Header, Footer
  }
}
</script>

<style lang="less" scoped>
.service-container {
  display: flex;
  min-width: 850px;
  flex-direction: column;
  align-items: center;
  margin: 100px 0 135px;

  .title {
    text-align: center;
    position: relative;

    &::after {
      display: block;
      content: '';
      width: 168px;
      height: 12px;
      background: url(/images/service/title_bg.png) no-repeat center center;
      position: absolute;
      top: 63px;
      left: 50%;
      margin-left: -84px;
    }

    h3 {
      font-size: 36px;
    }

    p {
      margin-top: 30px;
      font-size: 18px;
      color: #959595;
    }
  }

  .service-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sform-item {
    display: flex;
    flex-direction: row;
    margin: 26px 0 0;

    label {
      display: inline-block;
      width: 100px;
      font-size: 16px;
      line-height: 46px;
      color: #000;
    }

    input, textarea {
      width: 702px;
      padding: 0 10px;
      box-sizing: border-box;
      border: 1px solid #00a0e9;
      background: #f5f5f5;
      border-radius: 0;
      font-size: 18px;
      color: #333;
      transition: all 0.3s;
      outline: none;

      &:focus {
        box-shadow: 0 0 10px 4px rgba(0,0,0,.15);
      }
    }

    input {
      height: 46px;
      line-height: 46px;
    }

    textarea {
      height: 150px;
      padding: 10px;
    }

    button {
      padding: 10px 60px;
      font-size: 16px;
      border-radius: 10px;
      border: 0;
      transition: all 0.3s;
      cursor: pointer;
      outline: none;

      &.service-btn {
        background: #00a0e9;
        color: #fff;
      }

      &:hover {
        box-shadow: 0 0 10px 5px rgba(0,0,0,.15);
      }
    }

    &.sform-code {
      display: flex;
      flex-direction: row;

      input {
        width: 250px;
      }
    }
  }
  .sform-button {
    display: flex;
    justify-content: center;
  }
}
</style>
